<form
  dForm
  ngForm
  [layout]="formLayout"
  [formGroup]="formGroup"
  [dValidateRules]="formConfig.rule"
  #form="dValidateRules"
  (ngSubmit)="submitForm()"
>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="24">
      <d-form-item>
        <d-form-label [required]="true">{{ 'datadev.step.stepTitle' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="stepTitle" formControlName="stepTitle" [dValidateRules]="formConfig.stepTitleRules" />
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="24">
      <d-form-item>
        <d-form-label [required]="true">{{ 'datadev.step.source-kafka.consumerBootstrapServers' | translate }}</d-form-label>
        <d-form-control>
          <d-select
            [options]="dataSourceList"
            name="consumer_bootstrap_servers"
            [isSearch]="true"
            [allowClear]="true"
            formControlName="consumer_bootstrap_servers"
            [filterKey]="'label'"
            [dValidateRules]="formConfig.consumerBootstrapServersRules"
            [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
          >
            <ng-template let-option="option"> {{ option['label'] }} </ng-template>
          </d-select>
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="12">
      <d-form-item>
        <d-form-label [required]="true">{{ 'datadev.step.source-kafka.topic' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="topics" formControlName="topics" [dValidateRules]="formConfig.topicsRules" />
        </d-form-control>
      </d-form-item>
    </d-col>
    <d-col [dSpan]="12">
      <d-form-item>
        <d-form-label [required]="true">{{ 'datadev.step.source-kafka.consumerGroupId' | translate }}</d-form-label>
        <d-form-control>
          <input
            dTextInput
            name="consumer_group_id"
            formControlName="consumer_group_id"
            [dValidateRules]="formConfig.consumerGroupIdRules"
          />
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="12">
      <d-form-item>
        <d-form-label [required]="true">{{ 'datadev.step.source-kafka.formatType' | translate }}</d-form-label>
        <d-form-control>
          <d-radio-group
            [name]="'format_type'"
            [values]="formatTypeOptions"
            [direction]="'row'"
            formControlName="format_type"
            [dValidateRules]="formConfig.formatTypeRules"
          >
          </d-radio-group>
        </d-form-control>
      </d-form-item>
    </d-col>
    <d-col [dSpan]="12">
      <d-form-item>
        <d-form-label
          >{{ 'datadev.step.source-kafka.formatConf' | translate }}
          <a [href]="'https://seatunnel.apache.org/docs/2.1.2/connector/source/Kafka'" target="_blank">
            <d-icon
              [icon]="'icon-infomation'"
              dTooltip
              content="{{ 'datadev.step.source-kafka.formatConf.tooltip' | translate }}"
              [position]="'bottom'"
            ></d-icon> </a
        ></d-form-label>
        <d-form-control>
          <input dTextInput resize="vertical" name="format_conf" formControlName="format_conf" />
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="24">
      <d-form-item>
        <d-form-label [required]="true"
          >{{ 'datadev.step.source-kafka.schema' | translate }}
          <a [href]="'https://seatunnel.apache.org/docs/2.1.2/connector/source/Kafka#schema-string'" target="_blank">
            <d-icon
              [icon]="'icon-infomation'"
              dTooltip
              content="{{ 'datadev.step.source-kafka.schema.tooltip' | translate }}"
              [position]="'bottom'"
            ></d-icon>
          </a>
        </d-form-label>
        <d-form-control>
          <textarea dTextarea resize="vertical" name="schema" formControlName="schema" [dValidateRules]="formConfig.schemaRules">
          </textarea>
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="12">
      <d-form-item>
        <d-form-label>{{ 'datadev.step.source-kafka.rowtimeField' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="rowtime_field" formControlName="rowtime_field" />
        </d-form-control>
      </d-form-item>
    </d-col>
    <d-col [dSpan]="12">
      <d-form-item>
        <d-form-label>{{ 'datadev.step.source-kafka.watermark' | translate }}</d-form-label>
        <d-form-control>
          <d-input-number formControlName="watermark" name="watermark" [min]="1" [allowEmpty]="true"></d-input-number>
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="12">
      <d-form-item>
        <d-form-label>{{ 'datadev.step.source-kafka.offsetReset' | translate }}</d-form-label>
        <d-form-control>
          <d-radio-group
            [name]="'offset_reset'"
            [values]="offsetResetOptions"
            [direction]="'row'"
            formControlName="offset_reset"
            (change)="offsetResetChange($event)"
          >
          </d-radio-group>
        </d-form-control>
      </d-form-item>
    </d-col>
    <d-col [dSpan]="12">
      <d-form-item *ngIf="specificShow">
        <d-form-label>{{ 'datadev.step.source-kafka.offsetReset.specific' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="offset_reset_specific" formControlName="offset_reset_specific" />
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
  <d-row [dGutter]="[24, 12]">
    <d-col [dSpan]="24">
      <d-form-item>
        <d-form-label
          >{{ 'datadev.step.source-kafka.consumerConf' | translate }}
          <a [href]="'https://kafka.apache.org/documentation/#consumerconfigs'" target="_blank">
            <d-icon
              [icon]="'icon-infomation'"
              dTooltip
              content="{{ 'datadev.step.source-kafka.consumerConf.tooltip' | translate }}"
              [position]="'bottom'"
            ></d-icon>
          </a>
        </d-form-label>
        <d-form-control>
          <textarea dTextarea resize="vertical" name="consumer_conf" formControlName="consumer_conf"> </textarea>
        </d-form-control>
      </d-form-item>
    </d-col>
  </d-row>
</form>
